<template>
  <div
    id="app"
    class="app-main">
    <router-view/>
    <transition name="el-zoom-in-center">
      <div class="guideBox" v-if="showSwiuper">
        <swiper @slideChange="slideChange" ref="swiper">
          <swiper-slide>
            <img src="./assets/images/guide1.png"/>
          </swiper-slide>
          <swiper-slide>
            <img src="./assets/images/guide2.png"/>
          </swiper-slide>
          <swiper-slide><img src="./assets/images/guide3.png"/></swiper-slide>
          <swiper-slide><img src="./assets/images/guide4.png"/></swiper-slide>
          <swiper-slide><img src="./assets/images/guide5.png"/></swiper-slide>
          <swiper-slide><img src="./assets/images/guide6.png"/></swiper-slide>
        </swiper>
        <div class="nextbtn" v-if="swiperIndex < 5" @click="swiperNext">
          <img src="./assets/images/next.png"/>
        </div>
        <div class="nextbtn" v-if="swiperIndex == 5" @click="completeguide">
          <img src="./assets/images/complete.png"/>
        </div>
        <div class="close" @click="completeguide">
          <i class="el-icon-circle-close"></i> 关闭
        </div>
      </div>
    </transition>
  </div>
</template>

<script>
import eventBus from './libs/eventBus';
import 'swiper/dist/css/swiper.css';
import { swiper, swiperSlide } from 'vue-awesome-swiper';
import Reserve from './views/mixin/Reserve';
export default {
  mixins: [Reserve],
  'name': 'App',
  data () {
    return {
      guizeMo: false,
      swiperIndex: 0,
      showSwiuper: false
    };
  },
  components: {
    swiper,
    swiperSlide
  },
  methods: {
    slideChange () {
      this.swiperIndex = this.$refs.swiper.swiper.activeIndex;
    },
    swiperNext () {
      this.$refs.swiper.swiper.slideNext();
    },
    completeguide () {
      this.showSwiuper = false;
      if (!this.user.Behavior.First) {
        eventBus.$emit('firstLoad-completeguide');
        this.user.Behavior.First = true;
        this.behaviormodify(this.user.Behavior);
      }
    }
  },
  mounted () {
    if (navigator.userAgent.indexOf('Firefox') > 0 || navigator.userAgent.indexOf('MSIE') > 0) {
      let link = document.createElement('link');
      link.rel = 'stylesheet';
      link.type = 'text/css';
      link.href = '/Firefox.css';
      document.getElementsByTagName('head')[0].appendChild(link);
    }
    eventBus.$on('showguide', () => {
      this.showSwiuper = true;
      this.swiperIndex = 0;
    });
  },
  watch: {
    user (val) {
      if (!val.Behavior.First) {
        this.showSwiuper = true;
      }
    }
  }
};
</script>

<style lang="less">
    .app-main {
        width: 100%;
        height: 100%;
    }
    .guizemodel {
      .icon-gongxiangtuopaniconshangchuan-{
        color: #fff;
        font-size: 22px;
        margin-right: 10px;
        position: absolute;
        right: 6px;
        top: 6px;
        transform: rotate(-90deg);
        cursor: pointer;
      }
    }
    .guideBox{
      position: fixed;
      height: 100%;
      width: 100%;
      top: 0;
      left: 0;
      z-index: 999999999;
      background: #757575;
      .swiper-container{
        width: 100%;
        height: 100%;
        .swiper-slide{
          img {
            width: 100%;
          }
        }
      }
      .nextbtn{
        position: absolute;
        width: 115px;
        height: 50px;
        cursor: pointer;
        bottom:8%;
        left: 50%;
        z-index: 1000;
        margin-left:-60px;
        animation: scaleDraw 1.7s ease-in-out infinite;
        img {
          width: 100%;
          height: 100%;
        }
      }
      .close{
        color: #ffffff;
        position: absolute;
        top: 30px;
        right: 30px;
        font-size: 19px;cursor: pointer;
        border: 1px solid #ffffff;
        padding: 8px 16px;
        border-radius: 20px;
        i{
          font-size: 20px;
        }
        z-index: 1;
      }
    }
    @keyframes scaleDraw {  /*定义关键帧、scaleDrew是需要绑定到选择器的关键帧名称*/
      0%{
        transform: scale(1);  /*开始为原始大小*/
      }
      25%{
        transform: scale(1.1); /*放大1.1倍*/
      }
      50%{
        transform: scale(1);
      }
      75%{
        transform: scale(1.1);
      }
    }
</style>
